<template>
  <div id="article-type">
    <el-row :gutter="30">
      <el-col :span="12" v-for="(item, index) in articleList" :key="index">
        <article-card :info="item" />
      </el-col>
    </el-row>
    <div v-if="articleList.length == 0" class="text-align-center">
      <el-divider></el-divider>
      <i class="el-icon-warning-outline fz-50"></i>
      <h4>暂无此类型文章!</h4>
      <h3>请到管理端添加</h3>
      <!-- <el-divider></el-divider> -->
    </div>  
    <el-divider></el-divider>
    <el-pagination
      v-if="articleList.length !== 0"
      @size-change="sizeChange"
      @current-change="currentChange"
      :current-page="selectFrom.currentPage"
      :page-size="selectFrom.pageSize"
      background
      layout="total, prev, pager, next"
      :total="totalNum" 
      class="flex flex-space-between">
    </el-pagination>
  </div>
</template>

<script>
import ArticleCard from '../components/ArticleCard'
export default {
  data() {
    return {
      articleList: [],
      pageSizes: [10, 20, 30, 40, 50],
      totalNum: 1000,
      selectFrom: {
        type: '',
        pageSize: 20,
        currentPage: 1,
      },
    }
  },
  components: {
    ArticleCard
  },
  watch: {
    '$route.params.id'() {
      this.selectFrom.type = this.$route.params.id
      this.getArticleList()
    }
  },
  created() {
    this.selectFrom.type = this.$route.params.id
    this.getArticleList()
  },
  methods: {
    async getArticleList() {
      let res = await this.api.post('/client/getArticleList', this.selectFrom)
      if(res.code == 0) {
        this.articleList = res.data.articleList
        this.totalNum = res.data.counts
      }
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize
      this.getArticleList()
    },
    currentChange(thisPage) {
      this.page.currentPage = thisPage
      this.getArticleList()
    },
  },
}
</script>

<style lang="scss">
#article-type {
  width: 1100px;
  margin: 0 auto;
  padding-top: 80px;
}
</style>